<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="_fregments :: head(~{::title})">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>影院</title>
    <!-- <link rel="stylesheet" href="static/lib/bootstrap-4.6.2/bootstrap.min.css"> -->
    <link rel="stylesheet" href="../static/css/style.css">
    <link rel="stylesheet" href="../static/lib/layui/css/layui.css">
    <script src="../static/lib/jquery-3.5.1.min.js"></script>
    <script src="../static/lib/layui/layui.js"></script>
    <!-- <script src="static/lib/bootstrap-4.6.2/bootstrap.min.js"></script> -->
</head>

<body>
<!-- 导航栏 -->
<ul th:replace="_fregments :: nav(3)" class="layui-nav m-pl-sm m-pr-sm">
    <img src="../static/favicon.ico" width="20px">
    <a href="#" class="logo">
        &nbsp;挚夕影院
    </a>
    <li class="layui-nav-item"><a href=""><i class="layui-icon layui-icon-home">&nbsp;</i>首页</a></li>
    <li class="layui-nav-item "><a href=""><i class="layui-icon layui-icon-windows">&nbsp;</i>电影</a></li>
    <li class="layui-nav-item layui-this"><a href=""><i class="layui-icon layui-icon-link">&nbsp;</i>影院</a></li>
    <li class="layui-nav-item"><a href=""><i class="layui-icon layui-icon-tabs">&nbsp;</i>榜单</a></li>
    <span style="display: inline-block; width: 60%;">
            <div style="display: flex; padding-left: 20px;">
                <input type="text" name="title" required lay-verify="required" placeholder="找电影、影院"
                       autocomplete="off"
                       class="layui-input" style="width: 300px;">
                <button class="layui-btn" lay-submit lay-filter="formDemo"><i
                        class="layui-icon layui-icon-search">&nbsp;</i></button>
            </div>
        </span>

    <li class="layui-nav-item" style="text-align: right!important;">
        <a href=""><img src="../static/images/me.jpg" class="layui-nav-img"></a>
        <dl class="layui-nav-child">
            <dd><a href="javascript:;">修改信息</a></dd>
            <dd><a href="javascript:;">安全管理</a></dd>
            <dd><a href="javascript:;">退出</a></dd>
        </dl>
    </li>

</ul>

<!-- 内容 -->
<div class="layui-container" style="width: 100%; margin: 0%; padding: 0%;">
    <!-- 二级菜单 -->
    <div class="layui-row">
        <div class="layui-panel m-mlr m-mt" style="padding: 30px;">
            <!-- 品牌 -->
            <div class="layui-row">
                <div class="layui-col-xs3 layui-col-sm2 layui-col-md1">
                    品牌:
                </div>
                <div class="layui-col-xs9 layui-col-sm10 layui-col-md11">
                    <a class="m-btn m-btn-brand" data-value="0" th:classappend="${brandId == 0} ? 'm-btn-active'"
                       style="display: inline-block; margin: 5px;">
                        全部
                    </a>
                    <a th:each="brand : ${cinemaBrands}" th:data-value="${brand.id}"
                       th:classappend="${brand.id == brandId} ? 'm-btn-active'" class="m-btn m-btn-brand" href="#"
                       style="display: inline-block; margin: 5px;"
                       th:text="${brand.name}">
                        万达影城
                    </a>
                </div>
            </div>
            <hr>
            <!-- 行政区-->
            <div class="layui-row">
                <div class="layui-col-xs3 layui-col-sm2 layui-col-md1">
                    行政区:
                </div>
                <div class="layui-col-xs9 layui-col-sm10 layui-col-md11">
                    <a class="m-btn m-btn-area" data-value="0" th:classappend="${areaId == 0} ? 'm-btn-active'"
                       style="display: inline-block; margin: 5px;">
                        全部
                    </a>
                    <a th:each="area : ${cinemaAreas}" th:classappend="${areaId == area.id} ? 'm-btn-active'"
                       th:data-value="${area.id}"
                       class="m-btn m-btn-area" href="#" style="display: inline-block; margin: 5px;"
                       th:text="${area.name}">
                        鸠江区
                    </a>
                </div>
            </div>
            <hr>
            <!-- 影厅类型 -->
            <div class="layui-row">
                <div class="layui-col-xs3 layui-col-sm2 layui-col-md1">
                    影厅类型:
                </div>
                <div class="layui-col-xs9 layui-col-sm10 layui-col-md11">
                    <a data-value="0" class="m-btn m-btn-hall" th:classappend="${hallTypeId == 0} ? ' m-btn-active'"
                       style="display: inline-block; margin: 5px;">
                        全部
                    </a>
                    <a th:each="hallType : ${hallTypes}" th:classappend="${hallType.id == hallTypeId}"
                       class="m-btn m-btn-hall"
                       style="display: inline-block; margin: 5px;"
                       th:data-value="${hallType.id}"
                       th:text="${hallType.name}">
                        IMAX厅
                    </a>
                </div>
            </div>
        </div>
        <!-- 影院列表 -->
        <blockquote class="layui-elem-quote m-mlr m-mt">影院列表</blockquote>
        <div id="table-container">
            <div th:fragment="cinemaList">
                <!-- 一个列表项开始 -->
                <div th:each="cinema : ${cinemaPage.records}" class="layui-panel m-mlr m-mt">
                    <div class="layui-row" style="padding: 10px;">
                        <div class="layui-col-xs8 layui-col-sm9 layui-col-md10">
                            <h3 th:text="${cinema.name}" class="m-pb-normal">
                                万达影城(经开万达广场店)
                            </h3>
                            <div th:text="${cinema.address}" class="m-pb-normal m-tc-gray">
                                地址：金州区经济技术开发区辽河西路117号万达广场四楼
                            </div>
                            <div>
                                <span th:if="${cinema.isTicketChanged}" class="m-badge">可改签</span>
                                <span th:if="${cinema.isRefunded}" class="m-badge">可退票</span>
                                <!-- 拥有的影厅类型-->
                                <span th:each="typeName : ${cinema.hallTypeNames}"
                                      class="m-badge"
                                      th:text="${typeName}">
                                    IMAX厅
                                </span>
                            </div>
                        </div>
                        <div class="layui-col-xs4 layui-col-sm3 layui-col-md2"
                             style="text-align: right; line-height: 80px;">
                            <a th:href="@{/cinemaInfo/{id}(id=${cinema.id})}"
                               class="layui-btn layui-btn-normal  layui-btn-radius">
                                选座购票
                            </a>
                        </div>
                    </div>
                </div><!-- 一个列表项结束 -->
                <!--分页条-->
                <div class="layui-row layui-box layui-laypage layui-laypage-default"
                     style="width: 100% ;text-align: center">
                    <a th:data-pageNo="${cinemaPage.current - 1}"
                       class="layui-laypage-prev page-link"
                       th:classappend="${!cinemaPage.hasPrevious()} ? 'layui-disabled'">上一页</a>
                    <!-- 最多显示五个页码按钮-->
                    <!-- 小于等于5页，全部显示-->
                    <th:block th:if="${cinemaPage.getPages() <= 5}">
                        <!--考虑一页都没有的情况-->
                        <th:block th:if="${cinemaPage.getPages() > 0}">
                            <a th:each="i : ${#numbers.sequence(1,cinemaPage.getPages())}" class="page-link"
                               th:classappend="${i == cinemaPage.current} ? 'active'"
                               th:data-pageNo="${i}" th:text="${i}"></a>
                        </th:block>
                    </th:block>
                    <!-- 大于5页，分情况-->
                    <th:block th:if="${cinemaPage.getPages() > 5}">
                        <!-- 后面有两页及以上-->
                        <th:block th:if="${cinemaPage.getPages() >= cinemaPage.current + 2}">
                            <!-- no < 3 不居中-->
                            <th:block th:if="${cinemaPage.current < 3}">
                                <a th:each="i : ${#numbers.sequence(1, 5)}" class="page-link"
                                   th:classappend="${i == cinemaPage.current} ? 'active'"
                                   th:data-pageNo="${i}" th:text="${i}"></a>
                            </th:block>
                            <!-- 大于2可居中-->
                            <th:block th:if="${cinemaPage.current >= 3}">
                                <a th:each="i : ${#numbers.sequence(cinemaPage.current - 2, cinemaPage.current + 2)}"
                                   class="page-link"
                                   th:classappend="${i == cinemaPage.current} ? 'active'"
                                   th:data-pageNo="${i}" th:text="${i}"></a>
                            </th:block>
                        </th:block>
                        <!-- 当前页码后面不足两页-->
                        <th:block th:if="${cinemaPage.getPages() < cinemaPage.current + 2}">
                            <a th:each="i : ${#numbers.sequence(cinemaPage.getPages() - 4, cinemaPage.getPages())}"
                               class="page-link"
                               th:classappend="${i == cinemaPage.current} ? 'active'"
                               th:data-pageNo="${i}" th:text="${i}"></a>
                        </th:block>
                    </th:block>
                    <a th:data-pageNo="${cinemaPage.current + 1}" class="layui-laypage-next page-link"
                       th:classappend="${!cinemaPage.hasNext()} ? 'layui-disabled'">下一页</a>
                </div>
            </div>
        </div>

    </div>
</div>
<!--/*/<th:block th:replace="_fregments::script">/*/-->
<script src="../static/lib/jquery-3.5.1.min.js"></script>
<script src="../static/lib/layui/layui.js"></script>
<!--/*/</th:block>/*/-->
<script>
    function page(pageNo) {
        //品牌
        var brandId = $('.m-btn-brand.m-btn-active').data('value')
        if (brandId == 0) {
            brandId = null
        }
        //地区
        var areaId = $('.m-btn-area.m-btn-active').data('value')
        if (areaId == 0) {
            areaId = null
        }
        //影厅类型
        var hallTypeId = $('.m-btn-hall.m-btn-active').data('value')
        if (hallTypeId == 0) {
            hallTypeId = null
        }
        //加载数据
        $("#table-container").load(/*[[@{/cinema}]]*/"/cinema", {
            brandId: brandId,
            areaId: areaId,
            hallTypeId: hallTypeId,
            pageNo: pageNo,
            pageSize: 10
        });
    }

    //点击分页按钮
    function clickPageItem(obj) {
        if ($(obj).hasClass('active')) {
            return
        }
        var pageNo = $(obj).data('pageno')
        page(pageNo)
    }
    $(function (){
        layui.use(function () {
            var layer = layui.layer
                , form = layui.form,
                element = layui.element,
                carousel = layui.carousel;
            //建造实例
            carousel.render({
                elem: '#carousel1'
                , width: '100%' //设置容器宽度
                , height: '300px'
                , arrow: 'always' //始终显示箭头
                //,anim: 'updown' //切换动画方式
            });
            // layer.msg('Hello World');
        });
        //分页条按钮点击事件
        $("#table-container").on('click', '.page-link', function () {
            clickPageItem(this)
        })
        //选择品牌
        $(".m-btn-brand").click(function (){
            if($(this).hasClass('m-btn-active')){
                return
            }
            $(".m-btn-brand").removeClass('m-btn-active')
            $(this).addClass('m-btn-active')
            page(1)
        })
        //选择地区
        $(".m-btn-area").click(function (){
            if($(this).hasClass('m-btn-active')){
                return
            }
            $(".m-btn-area").removeClass('m-btn-active')
            $(this).addClass('m-btn-active')
            page(1)
        })
        //选择影厅类型
        $(".m-btn-hall").click(function (){
            if($(this).hasClass('m-btn-active')){
                return
            }
            $(".m-btn-hall").removeClass('m-btn-active')
            $(this).addClass('m-btn-active')
            page(1)
        })
    })

</script>
</body>

</html>